<template>
  <button @click="flag = !flag">切换</button>
  <transition :duration="1000" 
    enter-active-class="animate__animated animate__bounce"
    leave-active-class="animate__animated animate__bounce"
    >
    <div class="box1" v-show="flag"></div>
  </transition>
  <button @click="flag1 = !flag1">切换</button>
  <transition :duration="1000" 
    enter-active-class="animate__animated animate__fadeIn"
    leave-active-class="animate__animated animate__fadeOut"
    >
    <div class="box" v-show="flag1"></div>
  </transition>
  <button @click="flag2 = !flag2">切换</button>
  <transition :duration="1000" 
    enter-active-class="animate__animated animate__bounceIn"
    leave-active-class="animate__animated animate__bounceOut"
    >
    <div class="box" v-show="flag2"></div>
  </transition>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'

const flag = ref(true)
const flag1 = ref(true)
const flag2 = ref(true)


</script>

<style lang='scss' scoped>
.box {
  background-color: red;
  width: 300px;
  height: 300px;
}
.box1 {
  background-color: red;
  width: 300px;
  height: 300px;
  display: block !important;
}
</style>